<template>
  <q-card class="props-area q-pa-sm fit overflow-auto no-padding">
    <div class="panel-header text-subtitle2 text-blue-grey-9" style="padding: 5px 15px;">事件面板 {{currentNode.type}}</div>
    <!-- 事件面板 -->
    <q-scroll-area class="panel-body">
      <q-list class="q-pa-md" separator>
        <template v-for="(p,key) in config.events">
          <q-item dense style="padding: 0;">
            <PropsItem :p="p" :k="key" :option="option"></PropsItem>
          </q-item>
        </template>
      </q-list>
    </q-scroll-area>
  </q-card>
</template>

<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import { requestJSON, RW } from 'dlsjs';
import {getProperty} from "../common/getConfig.js"
import PropsItem from "./EventItem.vue"
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => ({})
  },
  dataScope: {
    type: Object,
    default: () => ({})
  }
})
const option = RW(props.dataScope)
const config = ref({})

watch(() => props.currentNode.type, async () => {
  config.value = await getProperty()[props.currentNode.type]
})
onBeforeMount(async () => {
  config.value = await getProperty()[props.currentNode.type]
})
</script>

<style scoped lang="scss">
.prop-item:hover {
  background-color: $blue-1;
}
.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.panel-body {
  height: calc(100% - 32px);
}
</style>
